import Page from "@/components/Page/Page";
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import styles from "./index.module.less";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "BaseTemplateAdd",
  setup() {
    const router = useRouter();
    const dicts = reactive({
      templateTypeDict: [
        { label: "仅商务标", value: 1 },
        { label: "商务+技术标", value: 2 },
      ],
      templateStandardDict: [
        { label: "标准分制", value: 1 },
      ],
      templateScoreTypeDict: [
        { label: "商务标100分", value: 1 },
        { label: "技术标加商务标满分100分", value: 2 },
        { label: "技术标加商务标各100分", value: 3 },
      ]
    })
    const state = reactive({
      form: {
        code: null,
        name: null,
        type: 1,
        standard: 1,
        scoreType: 1,
        swbScore: 100 as number | null,
        jsbScore: null as number | null,
        swbList: [] as any[],
        jsbList: [] as any[],
      },
      submiting: false,
    })
    const formRef = ref(null as any);
    watch(() => state.form.scoreType, (nv) => {
      state.form.swbScore = null;
      state.form.jsbScore = null;
      if (nv === 1) {
        state.form.swbScore = 100;
      }
      if (nv === 3) {
        state.form.swbScore = 100;
        state.form.jsbScore = 100;
      }
    }, {
      immediate: true,
      deep: true,
    })
    // 添加商务标评分项
    const swbAdd = () => {
      state.form.swbList.push({
        ratingItems: null,
        scoringCriteria: null,
        score: null,
      });
    }
    // 删除商务标评分项
    const swbDel = (idx: number) => {
      if (state.form.swbList.length === 1) {
        message.warning("至少保留一项评分项!");
        return;
      }
      state.form.swbList.splice(idx, 1);
    }
    // 添加技术标评分项
    const jsbAdd = () => {
      state.form.jsbList.push({
        ratingItems: null,
        scoringCriteria: null,
        score: null,
      });
    }
    // 删除技术标评分项
    const jsbDel = (idx: number) => {
      if (state.form.jsbList.length === 1) {
        message.warning("至少保留一项评分项!");
        return;
      }
      state.form.jsbList.splice(idx, 1);
    }
    onMounted(() => {
      swbAdd();
    })
    // 提交
    const submit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          // 模板类型为商务+技术标时，分值不得为0
          if (state.form.type === 2 && (!state.form?.swbScore || state.form?.swbScore <= 0 || !state.form?.jsbScore || state.form?.jsbScore <= 0)) {
            message.error("分配的分值不得为0!");
            return;
          }
          if (state.form.swbList.some(x => !x.ratingItems || !x.scoringCriteria) || state.form.jsbList.some(x => !x.ratingItems || !x.scoringCriteria)) {
            message.error("评分项及评分标准不能为空!");
            return;
          }
          if (state.form.swbList.reduce((accumulator, currentValue) => accumulator + currentValue.score, 0) !== (state.form.swbScore || 0)) {
            message.error("商务标分配分值有误请仔细查验!");
            return;
          }
          if (state.form.jsbList.reduce((accumulator, currentValue) => accumulator + currentValue.score, 0) !== (state.form.jsbScore || 0)) {
            message.error("技术标分配分值有误请仔细查验!");
            return;
          }
        })
    }
    return () => (
      <Page>
        <div class={styles.baseTemplateAdd}>
          <div class={styles.breadcrumbBox}>
            <a-breadcrumb>
              <a-breadcrumb-item>基础数据</a-breadcrumb-item>
              <a-breadcrumb-item>评标模板</a-breadcrumb-item>
              <a-breadcrumb-item>新建模板</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <div class={styles.container}>
            <div class={styles.content}>
              <a-form style={{ width: "100%" }} label-col={{ style: { width: '100px' } }} ref={formRef} model={state.form}>
                <a-row gutter={[16, 16]}>
                  <a-col span={8}>
                    <a-form-item label="模板编码" name="code">
                      <a-input v-model:value={state.form.code} placeholder="自动生成" disabled />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="模板名称" name="name">
                      <a-input v-model:value={state.form.name} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="模板类型" name="type">
                      <a-select v-model:value={state.form.type} options={dicts.templateTypeDict} onChange={(e) => {
                        state.form.standard = 1;
                        state.form.scoreType = state.form.type === 1 ? 1 : 2;
                        state.form.jsbList = [];
                        if (e === 2) {
                          jsbAdd();
                        }
                      }} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="分值标准" name="standard">
                      <a-select v-model:value={state.form.standard} options={dicts.templateStandardDict} disabled={state.form.type === 1} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="分值方式" name="scoreType">
                      <a-select v-model:value={state.form.scoreType} options={state.form.type === 1 ? dicts.templateScoreTypeDict.filter(x => x.value === 1) : dicts.templateScoreTypeDict.filter(x => [2, 3].includes(x.value))} disabled={state.form.type === 1} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="商务标分值" name="swbScore">
                      <a-input-number style={{ width: "100%" }} min={0} max={100} v-model:value={state.form.swbScore} disabled={[1, 3].includes(state.form.scoreType)} onChange={(e) => {
                        if (state.form.scoreType === 2) {
                          state.form.jsbScore = 100 - e;
                        }
                      }} />
                    </a-form-item>
                  </a-col>
                  {
                    state.form.type === 2 && <a-col span={8}>
                      <a-form-item required label="技术标分值" name="jsbScore">
                        <a-input-number style={{ width: "100%" }} min={0} max={100} v-model:value={state.form.jsbScore} disabled={[1, 3].includes(state.form.scoreType)} onChange={(e) => {
                          if (state.form.scoreType === 2) {
                            state.form.swbScore = 100 - e;
                          }
                        }} />
                      </a-form-item>
                    </a-col>
                  }
                  <a-col span={24}>
                    <a-divider orientation="left">评分项</a-divider>
                  </a-col>
                  <a-col span={24}>
                    <div class={styles.table}>
                      <div class={styles.tableHead}>
                        <div class={styles.tableHeadItem}>类别</div>
                        <div class={styles.tableHeadItem}>评分项</div>
                        <div class={styles.tableHeadItem}>评分标准</div>
                        <div class={styles.tableHeadItem}>标准分</div>
                        <div class={styles.tableHeadItem}>操作</div>
                      </div>
                      <div class={styles.tableBody}>
                        {
                          state.form.swbList.map((item: any, index: number) => (
                            <div class={styles.tableRow}>
                              <div class={styles.tableCol}>
                                <span class={styles.type}>商务标</span>
                              </div>
                              <div class={styles.tableCol}>
                                <a-input size="small" v-model:value={item.ratingItems} />
                              </div>
                              <div class={styles.tableCol}>
                                <a-input size="small" v-model:value={item.scoringCriteria} />
                              </div>
                              <div class={styles.tableCol}>
                                <a-input-number min={0} max={state.form.swbScore || 0} style={{ width: "100%" }} size="small" v-model:value={item.score} />
                              </div>
                              <div class={styles.tableCol} onClick={() => { swbDel(index) }}>
                                <DeleteOutlined style={{ fontSize: "16px", color: "red", cursor: "pointer" }} />
                              </div>
                            </div>
                          ))
                        }
                      </div>
                      <div class={styles.tableFoot}>
                        <a-button type="link" v-slots={{ icon: () => <PlusOutlined /> }} onClick={() => {
                          swbAdd();
                        }}>新增</a-button>
                      </div>
                    </div>
                  </a-col>
                  {
                    state.form.type === 2 && (
                      <a-col span={24} style={{ marginTop: "20px" }}>
                        <div class={styles.table}>
                          <div class={styles.tableHead}>
                            <div class={styles.tableHeadItem}>类别</div>
                            <div class={styles.tableHeadItem}>评分项</div>
                            <div class={styles.tableHeadItem}>评分标准</div>
                            <div class={styles.tableHeadItem}>标准分</div>
                            <div class={styles.tableHeadItem}>操作</div>
                          </div>
                          <div class={styles.tableBody}>
                            {
                              state.form.jsbList.map((item: any, index: number) => (
                                <div class={styles.tableRow}>
                                  <div class={styles.tableCol}>
                                    <span class={styles.type}>技术标</span>
                                  </div>
                                  <div class={styles.tableCol}>
                                    <a-input size="small" v-model:value={item.ratingItems} />
                                  </div>
                                  <div class={styles.tableCol}>
                                    <a-input size="small" v-model:value={item.scoringCriteria} />
                                  </div>
                                  <div class={styles.tableCol}>
                                    <a-input-number min={0} max={state.form.jsbScore || 0} style={{ width: "100%" }} size="small" v-model:value={item.score} />
                                  </div>
                                  <div class={styles.tableCol} onClick={() => { jsbDel(index) }}>
                                    <DeleteOutlined style={{ fontSize: "16px", color: "red", cursor: "pointer" }} />
                                  </div>
                                </div>
                              ))
                            }
                          </div>
                          <div class={styles.tableFoot}>
                            <a-button type="link" v-slots={{ icon: () => <PlusOutlined /> }} onClick={() => {
                              jsbAdd();
                            }}>新增</a-button>
                          </div>
                        </div>
                      </a-col>
                    )
                  }
                </a-row>
              </a-form>
            </div>
          </div>
          <div class={styles.footer}>
            <a-button onClick={() => { router.replace({name: "BaseTemplateMgr"}) }}>返回</a-button>
            <a-button type="primary" loading={state.submiting} onClick={() => { submit() }}>创建</a-button>
          </div>
        </div>
      </Page >
    )
  }
})